<template>
  <view class="container" style="padding: 0 30rpx 50rpx; background-color: #fff" v-if="isLoaded">
    <!-- 表单 -->
    <view class="content">
      <li-form>
        <li-form-item label="等级名称" required>
          <li-input v-model="form.title" rule="trim" prop="title" @blur="onBlurEvent($event)" />
        </li-form-item>
        <li-form-item label="充值总金额" required>
          <li-input v-model="form.rechargeAmount" prop="rechargeAmount" type="number" rule="int" @blur="onBlurEvent($event)" />
        </li-form-item>
        <li-form-item label="会员优惠类型" class="fs12">
          <li-picker
            class="fs14"
            v-model="form.discountType"
            :rangeList="[
              {
                id: 0,
                text: '折扣卡'
              },
              {
                id: 1,
                text: '会员价'
              },
              {
                id: 2,
                text: '零售价'
              }
            ]"
          />
        </li-form-item>
        <li-form-item label="会员折扣">
          <li-input rule="int" v-model="form.discountValue" prop="discountValue" @blur="onBlurEvent($event)" />
        </li-form-item>
        <li-form-item label="是否默认">
          <li-picker v-model="form.isDefault" :rangeList="booleanEnum" />
        </li-form-item>
        <li-form-item label="自动升级">
          <li-picker v-model="form.isOpenUpgrade" :rangeList="booleanEnum" />
        </li-form-item>
      </li-form>
    </view>

    <li-bottom-btns :mode="mode" @btnDelClick="btnDelClick" @btnEditOrSaveSubmitClick="btnEditOrSaveSubmitClick" />
  </view>
</template>
<script>
import liFormMixin from '../../../mixins/liFormMixin';
import { GetUserGradeById, DelUserGradeById, AddUserGrade, EditUserGrade } from '../../../common/api.js';

import { transferTypeEnum } from '../../../common/dataTransfer.js';
import { checkerType, modeEnum, booleanEnum } from '../../../constants/normalConstants.js';
export default {
  mixins: [liFormMixin],
  async onLoad(options) {
    this.loadEvent(options, this);
  },

  async mounted() {
    this.mountedEvent(this, {
      title: '',
      rechargeAmount: 0,
      discountType: 1,
      discountValue: 0,
      isDefault: false,
      isOpenUpgrade: true
    });
  },
  data() {
    return {
      modeEnum,
      booleanEnum,
      subject: '会员等级', // 主题
      rootRoute: 'workbench',
      routeName: 'memberLevel',
      mode: 'add', // 模式
      isLoaded: false,
      id: null,
      /* 表单 */
      form: null,
      /* 弹窗 */

      // 数据转换器
      transferRules: [
        {
          name: 'title',
          type: transferTypeEnum.trim
        },
        {
          name: 'rechargeAmount',
          type: transferTypeEnum.int
        },
        {
          name: 'discountValue',
          type: transferTypeEnum.int
        }
      ],
      //表单校验规则
      rules: [
        {
          name: 'title',
          checkType: checkerType.endNotNull,
          errorMsg: '会员等级名称不能为空~~'
        }
      ],
      lock: false // 节流锁

      /* 额外数据 */

      /* 额外校验规则 */
      /* 额外转换器 */
    };
  },

  methods: {
    onBlurEvent(e) {
      this.formBlur(e, this);
    },

    async getData() {
      this.form = (await GetUserGradeById(this.id)).data;
    },

    async getOtherData() {
      // ..
    },

    async insertData() {
      return AddUserGrade(this.form);
    },

    async delData() {
      return await DelUserGradeById(this.id);
    },

    async editData() {
      return await EditUserGrade(this.form);
    },

    async btnDelClick() {
      await this.formDelete(this);
    },

    async btnEditOrSaveSubmitClick() {
      await this.formInsertOrEdit(this);
    }

    /* 表单事件 */

    /* 额外方法放下面，上面是主干方法 */

    //方法放上面
  }
};
</script>
<style lang="scss" scoped>
@import '~@/static/styles/commonStyle.scss';
</style>
